<script setup lang="ts">
const props = defineProps({
  start: Number,
  end: Number,
});
const emits = defineEmits<{
  (e:'update:start',v:number): void,
  (e:'update:end',v:number): void,
}>();
const update=(type:string, v:number): void => {
  if (type === 'start') {
    emits("update:start",v)
  }else {
    emits("update:end",v)
  }
}
</script>

<template>
  <div class="number-range">
    <el-input-number :min="0" controls-position="right" :model-value="props.start" @update:model-value="v=>update('start',v)"/>
    <span>—</span>
    <el-input-number :min="0" controls-position="right" :model-value="props.end" @update:model-value="v=>update('end',v)"/>
  </div>
</template>

<style scoped lang="scss">
.number-range{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
}
</style>
